<template>
	<view class="l_pages">
		<jnavbar title="申请开票"></jnavbar>
		<scroll-view class="page_container tab_page_container" scroll-y>
			<view class="page">
				<view class="content bgf" style="padding: 30rpx 50rpx;">
					<view class="flex_box">
						<view>订单编号</view>
						<view class="tip">{{readOrderList.order_no}}</view>
					</view>
					<view class="flex_box tit">
						<view>开票金额</view>
						<view class="tip flex_box" style="color: #FF4600;">
							<view>￥</view>
							<view style="font-size: 38rpx;">{{readOrderList.allprice}}</view>
						</view>
					</view>
				</view>
				<u-form :model="formList" ref="uForm" label-width="150">
					<view class="content bgf">
						<u-form-item label="发票类型" :border-bottom="false" hover-class="none">
							<span style="color: #181818; font-size: 28rpx;" hover-class="none"
								slot="right">增值税电子普通发票</span>
						</u-form-item>
						<u-form-item label="抬头类型">
							<u-radio-group v-model="formList.invoice_type" slot="right">
								<u-radio name="1" active-color="orange">个人或事业单位</u-radio>
								<u-radio name="2" active-color="orange">企业</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item prop="rise" :border-bottom="false" label="发票抬头" :required="formList.invoice_type==2">
							<u-input v-model="formList.rise" type="text" :border="false" input-align="right"
								placeholder="填写需要开具发票的企业名称" :clearable="false" />
							<view class="flex_box_ag" slot="right">
								
								<u-icon name="arrow-right" @click="show = !show" style="margin:5rpx 0rpx 0 10rpx;">
								</u-icon>
							</view>
						</u-form-item>
						<u-form-item :prop="formList.invoice_type==2?'duty_paragraph':''" :border-bottom="false" label="税号" :required="formList.invoice_type==2">
							<u-input v-model="formList.duty_paragraph" type="text" :border="false" input-align="right"
								placeholder="纳税人识别号" :clearable="false" />
						</u-form-item>
						<u-form-item prop="phone" :border-bottom="false" label="手机号" :required="true">
							<u-input v-model="formList.phone" type="text" :border="false" input-align="right"
								placeholder="请输入个人手机号" :clearable="false" />
						</u-form-item>
						<u-form-item prop="mailbox" :border-bottom="false" label="邮箱" :required="true">
							<u-input v-model="formList.mailbox" type="text" :border="false" input-align="right"
								placeholder="请输入个人邮箱" :clearable="false" />
						</u-form-item>
						<view v-show="isShow && formList.invoice_type == 2">
							<u-form-item label="开户银行" :border-bottom="false">
								<u-input v-model="formList.deposit_bank" type="text" :border="false" input-align="right"
									placeholder="选填" :clearable="false" />
							</u-form-item>
							<u-form-item label="银行账号" :border-bottom="false">
								<u-input v-model="formList.bank_account" type="text" :border="false" input-align="right"
									placeholder="选填" :clearable="false" />
							</u-form-item>
							<u-form-item label="企业地址" :border-bottom="false">
								<u-input v-model="formList.address" type="text" :border="false" input-align="right"
									placeholder="选填" :clearable="false" />
							</u-form-item>
						</view>
						<u-form-item label="设置为默认抬头" label-width="250" :border-bottom="false">
							<u-checkbox v-model="is_default" shape="circle" active-color="orange" slot="right">
							</u-checkbox>
						</u-form-item>
						<view v-if="formList.invoice_type == 2" class="tetc" style="padding-bottom: 20rpx;"
							@click="isShow=!isShow">
							<u-icon v-if="!isShow" name="arrow-down"></u-icon>
							<u-icon v-else name="arrow-up"></u-icon>
						</view>
					</view>
				</u-form>
				<u-popup v-model="show" mode="bottom" length="65%" border-radius="14">
					<scroll-view class="page_container tab_page_container bottom-empty" scroll-y>
						<u-empty v-if="iskong == true" text="没有一条数据,请添加" mode="list"></u-empty>
						<view class="content">
							<view class="item" v-for="(item, index) in invoiceList" :key="index"
								@click="clickChange(index)">
								<view class="title-wrap">
									<view>
										<view class="title">{{item.rise}}</view>
										<view class="suihao">税号：{{item.duty_paragraph}}<span
												v-if="item.is_default==1">默认</span></view>
									</view>
								</view>
							</view>
						</view>
						<u-loadmore v-show="invoiceList.length>=10" :status="status" :icon-type="iconType"
							:load-text="loadText" />
					</scroll-view>
					<view class="bottom-footer content">
						<view class="footer-text" @click="addInvoice">添加新的抬头</view>
					</view>
				</u-popup>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="footer-text" @click="click">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		getisInvoice
	} from '@/common/invoice.js'
	import http from '@/common/http.js';
	export default {
		data() {
			return {
				id: '',
				formList: {
					rise: '',
					duty_paragraph: '',
					deposit_bank: '',
					bank_account: '',
					address: '',
					phone: '',
					mailbox: '',
					is_default: 0,
					invoice_type: 1
				},
				is_default: false,
				rules: {
					rise: [{
						required: true,
						message: '请输入发票抬头',
						trigger: 'blur'
					}],
					duty_paragraph: [{
						required: true,
						message: '请输入税号',
						trigger: 'blur'
					}],
					phone: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'blur'
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: "手机号码格式不正确",
							trigger: "blur"
						},

					],
					mailbox: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							pattern: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
							message: "邮箱格式不正确",
							trigger: "blur"
						}
					],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'blur'
					}, ]
				},
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				isChecked: false,
				show: false,
				isShow: false,
				page: 1,
				size: 10,
				invoiceList: [],
				iskong: false,
				readOrderList: {},
				InvoiceRiseRead: {},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		async onLoad(e) {
			await this.$getWx
			this.id = e.id
			this.getInvoiceList();
			if (this.id) {
				this.getReadOrder();
			}
			this.getInvoiceRiseRead();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			index() {
				this.getInvoiceList();
				this.getInvoiceRiseRead();
			},
			// 获取订单列表
			getReadOrder() {
				http('/order/readOrder/' + this.id, {}, 'GET').then(res => {
				let	orderdetail = res.data.msg
					let allprice = Number(orderdetail.money) - Number(orderdetail.discount) - Number(orderdetail.discount_amount) + Number(orderdetail.freight);
					orderdetail.allprice = allprice.toFixed(2);
					this.readOrderList=orderdetail
				})
			},
			//  获取默认抬头
			getInvoiceRiseRead() {
				http('/Invoice/riseRead', 'GET').then(res => {
					this.InvoiceRiseRead = res.data.msg
					if (this.InvoiceRiseRead == null) {
						this.formList = {
							invoice_type: 1
						}
					} else {
						this.formList = this.InvoiceRiseRead
					}
					this.isDefault()
				})
			},
			// 获取当前订单发票详情
			getInvoiceDetail() {
				http('/Invoice/'+this.invoice_id, 'GET').then(res => {
				})
			},
			// 获取已有的发票台头列表
			getInvoiceList() {
				let data = {
					size: this.size,
					page: this.page
				}
				http('/invoice/riseList', data, 'GET').then(res => {
					this.invoiceList = res.data.msg.data
					if (this.invoiceList.length == 0) {
						this.iskong = true
					}
				})
			},
			// 选择已有的发票台头
			clickChange(id) {
				this.formList = this.invoiceList[id]
				this.isDefault()
				this.show = !this.show
			},
			// 提交 并 修改
			click() {
				let data = this.formList
				let _this = this
				this.is_default == true ? data.is_default = 1 : data.is_default = 0
				// 验证表单
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let datas = {
							order_id: _this.id,
							money: _this.readOrderList.money,
							rise: _this.formList.rise,
							is_default: _this.formList.is_default,
							duty_paragraph: _this.formList.duty_paragraph,
							address: _this.formList.address,
							phone: _this.formList.phone,
							deposit_bank: _this.formList.deposit_bank,
							bank_account: _this.formList.bank_account,
							invoice_type: _this.formList.invoice_type,
							mailbox: _this.formList.mailbox,
							rise_id: _this.formList.id

						}
						if (datas.invoice_type == 1) {
							datas.bank_account = ""
							datas.deposit_bank = ""
						}
						_this.vehicleChangeData = JSON.parse(JSON.stringify(_this.formList));
						if (this.readOrderList.invoice) {
							datas.id = this.readOrderList.invoice.id
							http('/invoice/editInvoice', datas, 'put').then(res => {
								uni.showToast({
									title: "提交成功！",
									duration: 1500
								})
								setTimeout(function() {
									uni.navigateBack()
								}, 1500)
							})
							
						} else {
							http('/invoice/create', datas, 'POST').then(res => {
								uni.showToast({
									title: "提交成功！",
									duration: 1500
								})
								setTimeout(function() {
									uni.navigateBack()
								}, 1500)
							})
						}
					}
				})
			},
			// 添加抬头
			addInvoice() {
				this.Jumpurl({
					link: './addinvoice',
					type:1,
					login_type:2
				});
			},
			// is_default判断
			isDefault() {
				this.formList.is_default = 1 ? this.is_default = true : this.is_default = false
			}
		},

	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f6f7f8;
	}

	.content {
		margin: 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		overflow: hidden;

		/deep/ .u-form-item {
			padding: 20rpx 40rpx;
		}

		/deep/ .u-cell_title {
			font-size: 32rpx;
		}

		/deep/ .u-checkbox__label {
			overflow: hidden;
			display: none;
		}

		span {
			font-size: 24rpx;
		}
	}

	.footer {
		width: 95%;
		line-height: 80rpx;
		text-align: center;
		background: radial-gradient(circle farthest-side at top left, #FE8E0A 0, #FF5011 100%);
		border-radius: 50rpx;
		margin: auto;
		font-size: 28rpx;
		margin-bottom: 20rpx;

		.footer-text {
			font-size: 28rpx;
			color: #fff;
		}
	}

	.bottom-empty {
		height: calc(65vh - 100rpx);
	}

	.bottom-footer {
		width: 95%;
		line-height: 80rpx;
		text-align: center;
		background: radial-gradient(circle farthest-side at top left, #FE8E0A 0, #FF5011 100%);
		border-radius: 50rpx;
		margin: auto;
		font-size: 28rpx;
		margin-bottom: 20rpx;

		.footer-text {
			font-size: 28rpx;
			color: #fff;
		}
	}

	.flex_box_ag {
		display: flex;
		align-items: center;
	}

	.flex_box {
		display: flex;
		align-items: flex-end;
	}

	.bgf {
		background-color: #fff;
	}

	.tip {
		margin-left: 24rpx;
	}

	.tetc {
		text-align: center;
	}

	.item {
		display: flex;
		padding: 20rpx 25rpx;
		border-bottom: #e8e8e8 solid 1rpx;

		.title-wrap {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.suihao {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
			}

			span {
				font-size: 20rpx;
				color: #E5582B;
				border: #E5582B solid 1rpx;
				padding: 5rpx;
				border-radius: 10rpx;
				transform: scale(0.83);
				margin-left: 20rpx;
			}
		}
	}

	.item:last-child {
		border-bottom: none;
	}
</style>
